// ==UserScript==
// @name         词云Ui
// @namespace    http://tampermonkey.net/
// @version      2024-11-03
// @description  try to take over the world!
// @author       You
// @match        http://127.0.0.1:5500/bilibili%E8%AF%84%E8%AE%BA/tippyTest.html
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM.setValue
// @grant        GM.getValue
// @grant        GM_registerMenuCommand
// @require      https://update.greasyfork.org/scripts/498507/1398070/sweetalert2.js
// @require      https://update.greasyfork.org/scripts/515866/1477949/Tipyy-521.js
// ==/UserScript==

(function() {
    'use strict';
    window.addEventListener('load', addPanel);
    // 确保 DOM 完全加载
    // Your code here...
})();
function addPanel(){
    function genButton(text, foo, id, fooParams = {}){
        let b = document.createElement('button');
        b.textContent = text;
        b.style.verticalAlign = 'inherit';
        // 使用箭头函数创建闭包来保存 fooParams 并传递给 foo
        b.addEventListener('click', () => {
            foo.call(b, ...Object.values(fooParams)); // 使用 call 方法确保 this 指向按钮对象
        });
        if(id){ b.id = id };
        return b;
    }
    function changeRangeDynamics(){
        console.log(this.value);
        //只能通过dom方法改变
        document.querySelector('#swal-range > output').textContent = this.value;
    }
    async function openPanelFunc(){
        //获取数据完成标识符
        let isLoadEnd = false;
        var swalRangeValue = 100;
        // 模拟加载结束
        setTimeout(() => {
            isLoadEnd = true;
        }, 13000);
        // 设置定时器，每隔 100 毫秒检查 isLoadEnd
        // const checkInterval = setInterval(() => {
        //     if (isLoadEnd) {
        //         // 如果 isLoadEnd 为 true，停止定时器并隐藏加载弹窗
        //         clearInterval(checkInterval);
        //         Swal.hideLoading();
        //         Swal.close(); // 关闭弹窗
        //     }
        // }, 100);
        const { value: formValues } = await Swal.fire({
            title: "Multiple inputs",
            showCancelButton: true,
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            //class="swal2-range" swalalert框架可能会对其有特殊处理，导致其内标签的id声明失效
            html: `
              <input id="swal-input1" placeholder='正则表达式过滤' class="swal2-input">
              <div class="swal2-range" id="swal-range" style="display: flex;">
                <input type="range" min="0" max="500" step="10" value="100">
                <output>${swalRangeValue}</output>
              </div>
              <div class="swal2-radio">
                <input type="radio" id="option1" name="options" value="option1" checked>
                <label for="option1"><span class="swal2-label">热门评论</span></label>
                <input type="radio" id="option2" name="options" value="option2">
                <label for="option2"><span class="swal2-label">评论IP</span></label>
              </div>
            `,
            footer: '<span style="color:#6a60547a">当前评论总数:222</span>',
            focusConfirm: false,
            didOpen: () => {
                const swalRange = document.querySelector('#swal-range input');
                swalRange.addEventListener('input', changeRangeDynamics);
            },
            willClose: () => {
                // 在关闭前清除事件监听器以防止内存泄漏
                const swalRange = document.querySelector('#swal-range input');
                swalRange.removeEventListener('input', changeRangeDynamics);
            },
            preConfirm: () => {
              return [
                document.getElementById("swal-input1").value,
                document.getElementById("swal-input2").value,
                document.querySelector('.swal2-radio>input[name="options"]:checked').value
              ];
            }
        });
        if (formValues) {
            // Swal.fire(JSON.stringify(formValues));
            Swal.fire({
                title: '(๑¯ω¯๑)抓取中...',
                allowOutsideClick: false,
                allowEscapeKey: false,
                allowEnterKey: false,
                showConfirmButton: false,
                onBeforeOpen: () => {
                    Swal.showLoading();
                }
            });
        }
    }

    let myButton = genButton('comment', openPanelFunc, 'myButton');
    document.body.appendChild(myButton);

    tippy('#myButton', {
        content: '⁙ὸ‿ό⁙',
        placement: 'bottom', 
        delay: [500, 0],//延迟出现500，消失0
        duration: 300,
        arrow: true,
    });

    var css_text =`
        #myButton {
            position: fixed;
            top: 50%;
            left: -20px;/* 初始状态下左半部分隐藏 */
            transform: translateY(-50%);
            z-index: 1000; /* 确保按钮在最前面 */
            padding: 10px 24px;
            border-radius: 5px;
            cursor: pointer;
            border: 0;
            background-color: white;
            box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-size: 9px;
            transition: all 0.5s ease;
        }
        #myButton:hover {
            left: 0%; /* 鼠标悬停时完整显示 */
            letter-spacing: 3px;
            background-color: hsl(261deg 80% 48%);
            color: hsl(0, 0%, 100%);
            box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
        }
        #myButton:active {
            letter-spacing: 3px;
            background-color: hsl(261deg 80% 48%);
            color: hsl(0, 0%, 100%);
            box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
            transition: 100ms;
        }
    `
    GMaddStyle(css_text);
}
function GMaddStyle(css){
    var myStyle = document.createElement('style');
    myStyle.textContent = css;
    var doc = document.head || document.documentElement;
    doc.appendChild(myStyle);
}